<template>
  <div>
    <data-table :head="thead1" :data="tableData1" :page='currentPage' @callback="manipulate"
                :actions="['edit','view','del']"
                class="intendance-table"></data-table>
    <i class="el-icon-circle-plus-outline add-icon" @click="addCjg"></i>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
                   :total="totalPage" background>
    </el-pagination>
    <el-dialog title="" :visible.sync="dialogDetail" width="80%" append-to-body class="dialogDetail" @close="toClose">
      <h2 class="titleblue">{{cjgTitle}}</h2>
      <div class="contant">
        <el-row>
          <el-form ref="form" :model="hpShip">
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class"><i>*</i>船舶登记号</label>
                <el-input v-model="hpShip.regNo" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船舶识别号</label>
                <el-input v-model="hpShip.shipCode" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">中文船名</label>
                <el-input v-model="hpShip.cnName" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船检登记号</label>
                <el-input v-model="hpShip.checkNo" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">初次登记</label>
                <el-input v-model="hpShip.firstReg" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船籍港</label>
                <el-select clearable v-model="hpShip.regPortName" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in cjgOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <!-- <el-input v-model="hpShip.cjg" :disabled='readread' class="select-width-220 fl"></el-input> -->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">航区</label>
                <!-- <el-input v-model="hpShip.hq" :disabled='readread' class="select-width-220 fl"></el-input> -->
                <el-select clearable v-model="hpShip.sailingAreaName" :disabled='readread'
                           class="select-width-220 fl">
                  <el-option v-for="item in hqOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船舶种类</label>
                <!-- <el-input v-model="hpShip.cbzl" :disabled='readread' class="select-width-220 fl"></el-input> -->
                <el-select clearable v-model="hpShip.typeNameCn" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in cbOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">建成日期</label>
                <el-date-picker v-model="hpShip.builtDate" align="right" type="date" placeholder="选择日期"
                                class="select-width-220 fl" :disabled='readread'>
                </el-date-picker>
                <!--                <el-input v-model="hpShip.builtDate" :disabled='readread' class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船龄</label>
                <el-input v-model="hpShip.shipAge" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船舶长度</label>
                <el-input v-model="hpShip.shipLength" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">总吨</label>
                <el-input v-model="hpShip.grossTonnage" :disabled='readread'
                          class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">客位</label>
                <el-input v-model="hpShip.passengerCount" :disabled='readread'
                          class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">车位</label>
                <el-input v-model="hpShip.parkingCount" :disabled='readread'
                          class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">主机功率</label>
                <el-input v-model="hpShip.enginePower" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船舶所有人</label>
                <el-input v-model="hpShip.owner" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船舶所有人地址</label>
                <el-input v-model="hpShip.ownerAddress" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船舶所有人联系电话</label>
                <el-input v-model="hpShip.ownerTelephone" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船舶承租人</label>
                <el-input v-model="hpShip.renter" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船舶经营人</label>
                <el-input v-model="hpShip.operator" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">所有权登记日期</label>
                <el-date-picker v-model="hpShip.ownerRegDate" align="right" type="date" placeholder="选择日期"
                                class="select-width-220 fl" :disabled='readread'>
                </el-date-picker>
                <!--                <el-input v-model="hpShip.ownerRegDate" :disabled='readread' class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">国籍证书起始有效期</label>
                <el-date-picker v-model="hpShip.nationCertBegineDate" align="right" type="date" placeholder="选择日期"
                                class="select-width-220 fl" :disabled='readread'>
                </el-date-picker>
                <!--                <el-input v-model="hpShip.nationCertBegineDate" :disabled='readread'-->
                <!--                          class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">国籍证书截止有效期</label>
                <el-date-picker v-model="hpShip.nationCertEndDate" align="right" type="date" placeholder="选择日期"
                                class="select-width-220 fl" :disabled='readread'>
                </el-date-picker>
                <!--                <el-input v-model="hpShip.nationCertEndDate" :disabled='readread'-->
                <!--                          class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">光租起始日期</label>
                <el-date-picker v-model="hpShip.rentBegineDate" align="right" type="date" placeholder="选择日期"
                                class="select-width-220 fl" :disabled='readread'>
                </el-date-picker>
                <!--                <el-input v-model="hpShip.rentBegineDate" :disabled='readread' class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">光租截止日期</label>
                <el-date-picker v-model="hpShip.rentEndDate" align="right" type="date" placeholder="选择日期"
                                class="select-width-220 fl" :disabled='readread'>
                </el-date-picker>
                <!--                <el-input v-model="hpShip.rentEndDate" :disabled='readread' class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">船舶管理人</label>
                <el-input v-model="hpShip.manager" :disabled='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class"><i>*</i>所属机构</label>
                <el-select v-model="hpShip.type" placeholder="海事处" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in organization" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-form>
        </el-row>
        <el-row :gutter="24" class="footerbtn" v-if="cjgbtn">
          <el-button class="sure" @click="cjgSurebtn">确定</el-button>
          <el-button class="cancel" @click="toClose">取消</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import dictService from '@/services/DictionaryService.js'
  import * as orgService from '@/services/OrganizationService'
  import * as crewsService from '@/services/CrewsService.js'
  import * as portRegShipsService from '@/services/PortRegShipsService.js'
  import * as berthsService from '@/services/BerthsService.js'
  import * as transCompaniesService from '@/services/TransCompaniesService.js'
  import DataTable from '@/components/common/DataTable.vue'
  import moment from 'moment'

  export default {
    props: ['organization', 'cjgOptions', 'hqOptions', 'cbOptions'],
    components: {
      'data-table': DataTable
    },
    name: 'PortRegShip',
    data: function () {
      return {
        cjg: '',
        hq: '',
        cbzl: '',
        jg: '',
        jyms: '',
        bwxz: '',
        gsxz: '',
        gxjg: '',
        txn: '',
        lb: '',
        totalPage: 0,
        currentPage: 1,
        hpShip: {
          regNo: '',
          ownerAddress: '',
          ownerTelephone: '',
          renter: '',
          ownerRegDate: '',
          nationCertBegineDate: '',
          nationCertEndDate: '',
          rentBegineDate: '',
          rentEndDate: '',
          manager: '',
          type: '',
          cnName: '',
          firstReg: '',
          sailingAreaName: '',
          builtDate: '',
          shipLength: '',
          passengerCount: '',
          enginePower: '',
          shipCode: '',
          checkNo: '',
          regPortName: '',
          typeNameCn: '',
          shipAge: '',
          grossTonnage: '',
          parkingCount: '',
          owner: '',
          operator: '',
          suoshu: '4'
        },
        thead1: [
          {
            name: '船舶识别号',
            prop: 'shipCode'
          },
          {
            name: '中文船名',
            prop: 'cnName'
          },
          {
            name: '船籍港',
            prop: 'regPortName'
          },
          {
            name: '航区',
            prop: 'sailingAreaName'
          },
          {
            name: '船舶种类',
            prop: 'typeNameCn'
          },
          {
            name: '总吨',
            prop: 'grossTonnage'
          },
          {
            name: '船舶所有人',
            prop: 'owner'
          },
        ],
        tableData1: [],
        dialogDetail: false,
        name: '111',
        radio: '',
        cjgTitle: '添加船籍港船舶清单',
        readread: false,
        cjgId: '',
        cjgbtn: true,
        detailId: null,
        createTime: null
        // organization: [],
      }
    },
    mounted() {
      this.getData(0)
    },
    methods: {
      toClose() {
        this.dialogDetail = false
        // this.hpShip = {}
        this.readread = false
      },
      handleQuery(param) {
        var query = ''
        if (param.regPortName) {
          query += 'regPortName==' + param.regPortName
        }
        if (param.sailingAreaName) {
          if (query.length) {
            query += ';'
          }
          query += 'sailingAreaName==' + param.sailingAreaName
        }
        if (param.typeNameCn) {
          if (query.length) {
            query += ';'
          }
          query += 'typeNameCn==' + param.typeNameCn
        }
        return query
      },
      async search(param) {
        this.currentPage = param.currentPage
        let query = await this.handleQuery(param)
        this.getData(param.currentPage - 1, query)
      },
      getData(num, query = '') {
        portRegShipsService.search(num, query).then(async res => {
          this.totalPage = parseInt(res.headers['x-total-count'])
          let arr = []
          await res.data.forEach(item => {
            if (item.sailingAreaName) {
              this.hqOptions.forEach(value => {
                if (value.id == item.sailingAreaName) {
                  item.sailingAreaName = value.name
                }
              })
            }
            if (item.regPortName) {
              this.cjgOptions.forEach(value => {
                if (value.id == item.regPortName) {
                  item.regPortName = value.name
                }
              })
            }
            if (item.typeNameCn) {
              this.cbOptions.forEach(value => {
                if (value.id == item.typeNameCn) {
                  item.typeNameCn = value.name
                }
              })
            }
            arr.push(item)
          })
          this.tableData1 = arr
        })
      },
      async cjgSurebtn() {
        if (!this.hpShip.regNo) {
          this.$alert('请输入船舶登记号')
          return false
        }
        if (!this.hpShip.type) {
          this.$alert('请选择所属机构')
          return false
        }
        let organiza = {}
        await this.organization.forEach(item => {
          if (item.id == this.hpShip.type) {
            // organiza = item
            organiza = {id: item.id}
          }
        })
        if (this.hpShip.sailingAreaName) {
          await this.hqOptions.forEach(value => {
            if (value.name == this.hpShip.sailingAreaName) {
              this.hpShip.sailingAreaName = value.id
            }
          })
        }
        if (this.hpShip.regPortName) {
          await this.cjgOptions.forEach(value => {
            if (value.name == this.hpShip.regPortName) {
              this.hpShip.regPortName = value.id
            }
          })
        }
        if (this.hpShip.typeNameCn) {
          await this.cbOptions.forEach(value => {
            if (value.name == this.hpShip.typeNameCn) {
              this.hpShip.typeNameCn = value.id
            }
          })
        }
        let obj = {
          organiza,
          ownerAddress: this.hpShip.ownerAddress,
          ownerTelephone: this.hpShip.ownerTelephone,
          renter: this.hpShip.renter,
          nationCertBegineDate: this.$m(this.hpShip.nationCertBegineDate).toISOString(),
          nationCertEndDate: this.$m(this.hpShip.nationCertEndDate).toISOString(),
          rentBegineDate: this.$m(this.hpShip.rentBegineDate).toISOString(),
          rentEndDate: this.$m(this.hpShip.rentEndDate).toISOString(),
          ownerRegDate: this.$m(this.hpShip.ownerRegDate).toISOString(),
          builtDate: this.$m(this.hpShip.builtDate).toISOString(),
          manager: this.hpShip.manager,
          operator: this.hpShip.operator,
          shipAge: this.hpShip.shipAge,
          checkNo: this.hpShip.checkNo,
          firstReg: this.hpShip.firstReg,
          regNo: this.hpShip.regNo,
          shipCode: this.hpShip.shipCode,
          cnName: this.hpShip.cnName,
          regPortName: this.hpShip.regPortName,
          sailingAreaName: this.hpShip.sailingAreaName,
          typeNameCn: this.hpShip.typeNameCn,
          grossTonnage: this.hpShip.grossTonnage,
          shipLength: this.hpShip.shipLength,
          passengerCount: this.hpShip.passengerCount,
          parkingCount: this.hpShip.parkingCount,
          enginePower: this.hpShip.enginePower,
          owner: this.hpShip.owner
        }
        if (this.cjgTitle == '编辑船籍港船舶清单') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          portRegShipsService.update(obj).then(res => {
            if (res) {
              this.dialogDetail = false
              this.getData(0)
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }
          })
        } else {
          portRegShipsService.create(obj).then(res => {
            if (res) {
              this.dialogDetail = false
              this.getData(0)
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
            }
          })
        }
      },
      addCjg() {
        this.cjgId = ''
        this.dialogDetail = true
        this.readread = false
        // this.hpShip = {}
        this.cjgTitle = '添加船籍港船舶清单'
        this.cjgbtn = true
      },
      manipulate(param) {
        if (param.action == 'view') {
          this.dialogDetail = true
          this.cjgTitle = '船籍港船舶清单详情'
          // this.readread = true
          this.$set(this, 'readread', true)
          this.cjgbtn = false
          this.showDetail(param.data)
        } else if (param.action == 'edit') {
          this.dialogDetail = true
          this.cjgTitle = '编辑船籍港船舶清单'
          // this.readread = false
          this.$set(this, 'readread', false)
          this.cjgbtn = true
          this.showDetail(param.data)
        } else if (param.action == 'del') {
          portRegShipsService.deleteById(param.data.id).then(res => {
            this.getData(0)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }
      },
      showDetail(data) {
        for (let key in data) {
          if (key == 'id') {
            this.detailId = data[key]
          } else if (key == 'createTime') {
            this.createTime = data[key]
          } else if (key == 'type') {
            if (data.organiza) {
              this.hpShip.type = data.organiza.id
            }
          } else if (key == 'typeNameCn' && data[key]) {
            this.cbOptions.forEach(item => {
              if (data[key] == item.name) {
                this.hpShip[key] = item.id
              }
            })
          } else if (key == 'sailingAreaName' && data[key]) {
            this.hqOptions.forEach(item => {
              if (data[key] == item.name) {
                this.hpShip[key] = item.id
              }
            })
          } else if (key == 'regPortName' && data[key]) {
            this.cjgOptions.forEach(item => {
              if (data[key] == item.name) {
                this.hpShip[key] = item.id
              }
            })
          } else if (key == 'ownerRegDate' || key == 'nationCertBegineDate' || key == 'nationCertEndDate' || key == 'rentBegineDate' || key == 'rentEndDate' || key == 'builtDate' && data[key]) {
            this.hpShip[key] = this.$m(data[key]).format('YYYY-MM-DD HH:mm:ss')
          } else {
            this.hpShip[key] = data[key]
          }
        }
      },
      handleSizeChange(val) {
        this.$emit('update', val)
        this.getData(val - 1)
      },
      handleCurrentChange(val) {
        this.$emit('update', val)
        this.getData(val - 1)
        // this.$emit('update:currentPage', val)
      }
    }
  }
</script>
